<template>
  <div class="check-wrap">
    <div class="check-list" ref="wrapper">
      <div class="check-con">
        <div class="check-box" v-for="(item,index) in checkList" :key="index" v-show="showCheck==1">
          <div class="check-content">
            <span class="name">{{item.userName}}</span><span class="number">{{item.phone}}</span>
            <button type="button" class="pass" @click="pass(item.id)">通过</button>
          </div>
          <div class="check-content">
            <span class="name">身份证号:</span><span class="number">{{item.userCardNumber}}</span>
            <button type="button" class="refuse" @click="refuse(item.id)">拒绝</button>
          </div>
        </div>
      </div>
    </div>


    <!--搜索无结果-->
    <div class="empty-wrap" v-show="showCheck==2">
      <div class="empty-box">
        <div class="img-box"><img src="../../images/empty.png" class="empty" onclick="return false"/></div>
        <div class="tip">没有相关记录!</div>
      </div>
    </div>
  </div>
</template>

<script>
  import {baseUrl} from "../../common/js/env"
  import BScroll from 'better-scroll'
  import {getDeviceRatio} from "../../common/js/util"

  /*获取当前缩放比*/
  const DEVICE_RATIO = getDeviceRatio();
  /**
   *
   * @param threshold 触发事件的阀值，即滑动多少距离触发
   */
  /*上拉配置*/
  const UP_CONFIG = {
    threshold: -80 * DEVICE_RATIO,
  }

  export default {
    inject: ['reload'],
    data() {
      return {
        userSign: "",
        mechanismId: "",
        checkList: [],
        showCheck: "",
        checkScroll: null,
        currentPage: 1,
        PageSize: 20,
        noMoreData: false,
        showLoading: false,
        center: false,
        pullUpLoading: false,
        loadingWord: "正在加载",
        loadingPosition: ""
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("success"));
      this.mechanismId = this.$route.query.mechanismId;
      this.queryCheckList();
    },
    methods: {
      queryCheckList() {//查询申请列表
        this.$vux.loading.show({
          text: '加载中',
        });
        this.axios.get(baseUrl + "/work_money/get_work_user_list?sgin=" + this.userSign + "&mechanismId=" + this.mechanismId + "&page=" + this.currentPage + "&size=" + this.PageSize).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0) {
            if (resultObj.data != null && resultObj.data.length > 0) {
              this.showCheck = 1;
              this.checkList = resultObj.data;
              //DOM还没有更新
              this.$nextTick(() => {
                this.initScroll();
                this.checkScroll.on('touchEnd', (pos) => {
                  if (Math.abs(Math.round(pos.y)) > Math.abs(Math.round(this.checkScroll.maxScrollY + 1))) {
                    this.loadMore();
                  }
                });
              });
            } else {
              this.showCheck = 2;
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      refuse(id) {//拒绝
        this.$router.push({path: "/refuse", query: {"id": id, "mechanismId": this.mechanismId}});
      },
      pass(id) {//通过
        this.$vux.loading.show({
          text: '加载中',
        });
        let data = {
          "mechanismId": this.mechanismId,
          "type": 1,
          "id": id
        };
        this.axios.post(baseUrl + "/work_money/set_work_user?sgin=" + this.userSign, data).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0) {
            if (resultObj.data == 0) {
              this.reload();
              this.$vux.toast.text("通过失败,请重试", "middle");
            } else {
              this.reload();
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
            return;
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      loadMore() {//加载更多
        if (!this.noMoreData) {
          this.$vux.loading.show({
            text: '加载中',
          });
          setTimeout(() => {
            this.axios.get(baseUrl + "/work_money/get_work_user_list?sgin=" + this.userSign + "&mechanismId=" + this.mechanismId + "&page=" + (++this.currentPage) + "&size=" + this.PageSize).then((res) => {
              let resultObj = res.data;
              if (resultObj.code == 0) {
                if (resultObj.data.length > 0) {
                  this.checkList = this.checkList.concat(resultObj.data);
                } else {
                  this.noMoreData = true;
                }
                this.$vux.loading.hide();
              } else {
                this.$vux.loading.hide();
                this.$vux.toast.text(resultObj.msg, "middle");
              }
            })
          }, 500)
        }
      },
      initScroll() {//初始化BScroll
        if (!this.checkScroll) {
          this.checkScroll = new BScroll(this.$refs.wrapper, {
            probeType: 3,
            deceleration: 0.003,
            bounce: false,
            swipeTime: 2000,
            click: true,
            pullUpLoad: UP_CONFIG
          });
        } else {
          this.checkScroll.refresh();
        }
      },
      enable() {
        this.checkScroll && this.checkScroll.enable()
      },
      refresh() {
        this.checkScroll && this.checkScroll.refresh()
      },
      finishPullUp() {
        this.checkScroll && this.checkScroll.finishPullUp()
      }
    },
    watch: {
      checkList() {
        this.$nextTick(() => {
          this.checkScroll.refresh();
        })
      }
    },
    components: {
      BScroll
    }
  }
</script>

<style lang="stylus" scoped>
  .check-wrap
    width: 100%
    height: auto
    .check-list
      position: fixed;
      top: 0;
      bottom: 0;
      width: 100%;
      overflow: hidden;
      .check-box
        display: flex
        justify-content: center
        flex-direction: column
        width: 100%
        height: 2.36rem
        border-bottom: 0.013rem solid rgba(230, 230, 230, 1)
        .check-content
          display: flex
          align-items: center
          margin-left: 0.426666rem
          margin-bottom: 0.2rem
          .name
            font-size: 0.386666rem
            color: rgba(68, 68, 68, 1)
          .number
            padding-left: 0.4rem
            font-size: 0.386666rem
            color: rgba(68, 68, 68, 1)
          .pass
            margin-left: auto
            margin-right: 0.293333rem
            width: 1.6rem
            height: 0.693333rem
            line-height: 0.693333rem
            background: rgba(60, 175, 255, 1)
            border-radius: 0.346666rem
            font-size: 0.346666rem
            color: rgba(255, 255, 255, 1)
            border: 0.013rem solid rgba(60, 175, 255, 1)
          .refuse
            margin-left: auto
            margin-right: 0.293333rem
            width: 1.6rem
            height: 0.693333rem
            line-height: 0.693333rem
            border: 0.013rem solid rgba(60, 175, 255, 1)
            border-radius: 0.346666rem
            font-size: 0.386666rem
            color: rgba(60, 175, 255, 1)
            background: rgba(255, 255, 255, 1)
    .empty-wrap
      display: flex
      align-items: center
      justify-content: center
      width: 100%
      height: auto
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      .empty-box
        width: 4.773rem
        height: auto
        .img-box
          width: 100%
          height: 4.773rem
          .empty
            width: 100%
            height: 100%
        .tip
          display: flex
          justify-content: center
          margin-top: 0.387rem
          font-size: 0.373rem
          color: rgba(68, 68, 68, 1)
</style>
